<template>
    <!-- 会员福利中心 -->
    <el-card>
        <el-button size="large" width="80" height="80" type="primary" @click="drawer = true">新增福利</el-button>
    </el-card>
    <!-- 按钮都是同一个组件 -->
    <el-card class="mt">
        <el-radio-group v-model="params.radio" size="large" @change="radioChange">
            <el-radio-button :label="item.label" :value="item.id" v-for="(item, index) in radioButton" :key="item.id" />
        </el-radio-group>
    </el-card>
    <!-- 经验者 -->
    <NormalGift v-if="url === '/normalgift'" :loading="loading" :data-list="dataList"></NormalGift>
    <MemberGift v-else :loading="loading" :data-list="dataList"></MemberGift>
    <el-drawer destroy-on-close v-model="drawer" title="I am the title" :with-header="false">
        <h1 v-if="url === '/normalgift'" class="test mt mb">添加{{ params.radio === 1 ? "至尊" : (params.radio === 2 ? "高级"
            : (params.radio === 3 ? "中级"
                :
                "普通")) }}福利</h1>
        <h1 v-else class="test mt mb">添加{{ params.radio === 1 ? "年卡" : (params.radio === 2 ? "季卡" : (params.radio === 3
            ? "月卡"
            :
            "普通")) }}福利</h1>
        <stepForm v-if="url === '/normalgift'" :steps="steps" :form1="form1" :form2="form2" @handleSubmit="addGift">
            <template #step-1>
                <el-form ref="form1" :model="formParams.basicInfo" :rules="basicRules">
                    <el-form-item label="福利：" prop="name">
                        <el-input v-model="formParams.basicInfo.name" placeholder="请输入福利名称"></el-input>
                    </el-form-item>
                    <el-form-item label="样式：" prop="type">
                        <el-select v-model="formParams.basicInfo.type" placeholder="请选择要展示的背景样式">
                            <el-option label='primary' value="primary"></el-option>
                            <el-option label='info' value="info"></el-option>
                            <el-option label='success' value="success"></el-option>
                            <el-option label='warning' value="warning"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </template>
            <template #step-2>
                <el-form ref="form2" :model="formParams">
                    <el-form-item>
                        <el-input disabled v-model="formParams.shepi.createName"></el-input>
                    </el-form-item>
                </el-form>
            </template>
        </stepForm>
        <stepForm v-else :steps="steps" @handleSubmit="addGift" :form1="form3" :form2="form4">
            <template #step-1>
                <el-form ref="form3" :model="formParams2.basicInfo">
                    <el-form-item label="福利名称">
                        <el-input v-model="formParams2.basicInfo.name" placeholder="请输入福利名称"></el-input>
                    </el-form-item>
                    <el-form-item label="福利详情">
                        <el-input v-model="formParams2.basicInfo.namespace" placeholder="请输入给予用户的福利"></el-input>
                    </el-form-item>
                </el-form>
            </template>
            <template #step-2>
                <el-form ref="form4" :model="formParams2.shepi">
                    <el-form-item label="福利创建者">
                        <el-input v-model="formParams2.shepi.create_name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="上传福利专属图片">
                        <el-upload v-model:file-list="fileList"
                            action="#"
                            :http-request="mockUpload"
                            list-type="picture-card"  
                            >
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>

                        <el-dialog v-model="dialogVisible">
                            <img w-full :src="dialogImageUrl" alt="Preview Image" />
                        </el-dialog>
                    </el-form-item>
                </el-form>
            </template>
        </stepForm>
    </el-drawer>
</template>


<script setup lang="ts">
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'

import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { useHttp } from '@/hook/useHttps'
import { useUserStore } from '@/store/auth'
import { getNormalButton, getMemberButton } from '@/api/gift'
import stepForm from '@/components/stepForm/stepForm.vue'
import NormalGift from './components/NormalGift.vue'
import MemberGift from './components/MemberGift.vue'
import { Plus } from '@element-plus/icons-vue'

import type {  UploadUserFile } from 'element-plus'

interface ChoiceButtonType {
    id: number,
    label: string
}
const UserStore = useUserStore()
const { username } = storeToRefs(UserStore)
const form1 = ref<FormInstance>()
const form2 = ref<FormInstance>()
const form3 = ref<FormInstance>()
const form4 = ref<FormInstance>()
const params = ref<any>({
    radio: 1
})
const route = useRoute()
//对后端发起请求的路径
const url = ref<string>('')
// 后端返回的按钮数
const radioButton = ref<ChoiceButtonType[]>([])
// 抽屉框
const drawer = ref<boolean>(false)

// 共用一个界面，判断路径是哪一个，向对应的路径发起请求
if (route.path === '/normalgift') {
    url.value = '/normalgift'
}
else if (route.path === '/membergift') {
    url.value = '/membergift'
}
const { dataList, loading, loadData } = useHttp(url.value, params)
console.log('546465464678979879789797877979', dataList)
// 切换选项重新从后端拿数据
const radioChange = () => {
    loadData()
}
onMounted(async () => {
    if (url.value === '/normalgift') {
        const { data } = await getNormalButton()
        // 经验者按钮
        radioButton.value = data.list
    }
    if (url.value === '/membergift') {
        // 会员按钮
        const { data } = await getMemberButton()
        radioButton.value = data.list
    }
})
// ------------------------经验者数据---------------------------
const formParams = ref({
    basicInfo: {
        name: '',
        type: ''
    },
    shepi: {
        createName: username
    }
})
// ------------------------会员数据---------------------------
const formParams2 = ref({
    basicInfo: {
        name: "",
        namespace: ""
    },
    shepi: {
        create_name: "",
        src: ""
    }
})
// 表单规则
const basicRules = {
    name: [
        { required: true, message: '名称不可以为空', trigger: 'blur' }
    ],
    type: [
        { required: true, message: '类型不可以为空', trigger: 'blur' },
    ]
}
// steps步骤
const steps = [
    { title: '基本信息' },
    { title: '审批信息' },
]
// 提交用户数据
const addGift = () => {
    const addForm = {
        ...formParams.value.basicInfo,
        ...formParams.value.shepi,
        ...params.value
    }
    console.log(addForm, '4546456546')
    ElMessage({
        message: '添加信息成功',
        type: 'success',
    })
    drawer.value = false
    loadData()
}


const fileList = ref<UploadUserFile>(
)

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const mockUpload = (options:any) => {
  const { file, onSuccess } = options  // 解构文件对象和成功回调

  // 1. 生成临时预览URL（前端本地预览用，刷新后失效）
  const tempUrl = window.URL.createObjectURL(file)

  // 2. 模拟异步上传（用setTimeout模拟网络延迟）
  setTimeout(() => {
    // 3. 调用onSuccess通知组件“上传成功”，并返回临时URL
    onSuccess({
      url: tempUrl,  // 临时预览地址
      name: file.name  // 文件名
    })

    ElMessage.success('模拟上传成功（仅前端预览）')
    console.log(fileList)
  }, 800)  // 模拟800ms网络延迟
}
</script>

